import { apiGetQRCode } from '../../api/index'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goodData: {},
    isLoaded: false,
    goodsHeight: 0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad (options) {
    let goodData = JSON.parse(options.data)
    this.screenRatio = wx.getSystemInfoSync().windowWidth / 375
    apiGetQRCode({
      goods_id: goodData.goods_id
    }).then(res => {
      this.generateCode(goodData, res.data)
    })
  },
  generateCode (goods, qrPath) {
    const name = goods.goods_name
    // 圆角半径
    const r = 15
    // 价格字段长度
    const showPriceLen = goods.price.split('.')[0].length
    // 头像
    const avaImgUrl = wx.getStorageSync('avatarUrl')
    wx.showLoading({
      title: '拼命生成中'
    })
    wx.getImageInfo({
      src: goods.picture_info.pic_cover,
      success: (res) => {
        const calcA = 343 * this.screenRatio / res.width
        const paddingLeft = (this.screenRatio * 15).toFixed(2) - 0
        const paddingTop = (this.screenRatio * 42).toFixed(2) - 0
        const goodsWidth = (res.width * calcA).toFixed(2) - 0 - (paddingLeft * 2)
        const goodsHeight = (res.height * calcA).toFixed(2) - 0
        this.setData({
          goodsHeight: goodsHeight + 180 * this.screenRatio + (paddingTop * 2)
        })
        const ctx = wx.createCanvasContext('myCanvas')
        // 绘制背景
        ctx.setFillStyle('#F8E71C')
        ctx.fillRect(0, 0, goodsWidth + (paddingLeft * 2), this.data.goodsHeight + (paddingTop * 2))
        ctx.save()
        ctx.beginPath()
        // 绘制左上角圆弧
        ctx.arc(r + paddingLeft, r + paddingTop, r, Math.PI, Math.PI * 1.5)
        // 绘制border-top
        ctx.moveTo(r + paddingLeft, paddingTop)
        ctx.lineTo(goodsWidth - r + paddingLeft, paddingTop)
        // 绘制右上角圆弧
        ctx.arc(goodsWidth - r + paddingLeft, r + paddingTop, r, Math.PI * 1.5, Math.PI * 2)
        // 绘制border-right
        ctx.lineTo(goodsWidth + paddingLeft, r + paddingTop)
        // 绘制右下角圆弧
        ctx.arc(goodsWidth - r + paddingLeft, this.data.goodsHeight - r - paddingTop, r, 0, Math.PI * 0.5)
        // 绘制border-bottom
        ctx.lineTo(r + paddingLeft, this.data.goodsHeight - paddingTop)
        // 绘制左下角圆弧
        ctx.arc(r + paddingLeft, this.data.goodsHeight - r - paddingTop, r, Math.PI * 0.5, Math.PI)
        // 绘制border-left
        ctx.lineTo(paddingLeft, r + paddingTop)
        ctx.setFillStyle('white')
        ctx.fill()
        ctx.setStrokeStyle('transparent')
        ctx.stroke()
        ctx.closePath()
        ctx.clip()
        ctx.setFillStyle('white')
        ctx.fillRect(0, 0, 343 * this.screenRatio, 1200 * this.screenRatio)
        ctx.setFontSize(12 * this.screenRatio)
        ctx.fillStyle = '#9B9B9B'
        ctx.fillText('分享了一条商品信息', paddingLeft + 15 * this.screenRatio, paddingTop + 36 * this.screenRatio)
        // 绘制商品图片
        ctx.drawImage(res.path, 0 + paddingLeft, 46 * this.screenRatio + paddingTop, goodsWidth, goodsHeight)
        // 绘制商品名
        ctx.setFontSize(16 * this.screenRatio)
        // 绘制价格
        ctx.fillStyle = '#D0021B'
        ctx.setFontSize(14)
        ctx.fillText('¥', 17 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 74 * this.screenRatio)
        ctx.setFontSize(18)
        ctx.fillText(goods.price, 30 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 74 * this.screenRatio - 0.5)
        // 绘制斜杠线条
        ctx.beginPath()
        ctx.moveTo(80 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 60 * this.screenRatio)
        ctx.lineTo(72 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 74 * this.screenRatio)
        ctx.strokeStyle = '#B2B2B2'
        ctx.closePath()
        ctx.stroke()
        ctx.setFontSize(14)
        ctx.fillText(goods.make_money, 108 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 72 * this.screenRatio)
        ctx.setFontSize(16)
        ctx.fillText('赚', 88 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 72 * this.screenRatio)
        ctx.beginPath()
        ctx.moveTo(88 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 74 * this.screenRatio)
        ctx.lineTo(104 + showPriceLen * 10 + paddingLeft, paddingTop + goodsHeight + 74 * this.screenRatio)
        ctx.strokeStyle = '#D0021B'
        ctx.closePath()
        ctx.stroke()
        // 商品名字
        ctx.fillStyle = '#000000'
        if (this.screenRatio > 1) {

        }
        const textCount = this.screenRatio > 1 ? 16 : this.screenRatio === 1 ? 12 : 10
        if (name.length > textCount) {
          ctx.fillText(name.slice(0, textCount), 17 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 100 * this.screenRatio - 0.5)
          if (name.length > textCount * 2) {
            const nameBack = `${name.slice(textCount, textCount * 2)}...`
            ctx.fillText(nameBack, 17 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 124 * this.screenRatio - 0.5)
          } else {
            ctx.fillText(name.slice(textCount), 17 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 124 * this.screenRatio - 0.5)
          }
        } else {
          ctx.fillText(name, 17 * this.screenRatio + paddingLeft, paddingTop + goodsHeight + 100 * this.screenRatio)
        }
        ctx.fillStyle = '#B2B2B2'
        ctx.setFontSize(12)
        ctx.fillText('自营电商', (35 + paddingLeft) * this.screenRatio, paddingTop + goodsHeight + 166 * this.screenRatio)
        ctx.fillText('正品保证', (100 + paddingLeft) * this.screenRatio, paddingTop + goodsHeight + 166 * this.screenRatio)
        ctx.fillText('全场包邮', (162 + paddingLeft) * this.screenRatio, paddingTop + goodsHeight + 166 * this.screenRatio)
        ctx.fillText('7天退换货', (225 + paddingLeft) * this.screenRatio, paddingTop + goodsHeight + 166 * this.screenRatio)
        // 绘制logo
        wx.getImageInfo({
          src: qrPath,
          success: (res) => {
            ctx.drawImage(res.path, goodsWidth + paddingLeft - 76, paddingTop + goodsHeight + 74 * this.screenRatio, 60 * this.screenRatio, 60 * this.screenRatio)
            ctx.restore()
            wx.getImageInfo({
              src: avaImgUrl,
              success: (headUrl) => {
                // 绘制头像
                ctx.beginPath()
                ctx.arc(paddingLeft + 44 * this.screenRatio, 38 * this.screenRatio, 26 * this.screenRatio, 0, 2 * Math.PI)
                ctx.setFillStyle('#FFFFFF')
                ctx.fill()
                // 绘制头像
                ctx.beginPath()
                ctx.arc(paddingLeft + 44 * this.screenRatio, 38 * this.screenRatio, 22 * this.screenRatio, 0, 2 * Math.PI)
                ctx.fill()
                ctx.clip()
                ctx.drawImage(headUrl.path, paddingLeft + 22 * this.screenRatio, 16 * this.screenRatio, 44 * this.screenRatio, 44 * this.screenRatio)
                // 绘制
                ctx.draw(false, (res) => {
                  if (res.errMsg.indexOf('ok') !== -1) {
                    wx.canvasToTempFilePath({
                      x: 0,
                      y: 0,
                      width: 343 * this.screenRatio,
                      height: this.data.goodsHeight,
                      canvasId: 'myCanvas',
                      success: (res) => {
                        this.fileImgPath = res.tempFilePath
                        console.log(res.tempFilePath)
                        wx.hideLoading()
                        this.setData({
                          isLoaded: true,
                          creatImg: res.tempFilePath
                        })
                      }
                    })
                  }
                })
              }
            })
          },
          fail: () => {
            ctx.drawImage('../../images/scanner.jpg', goodsWidth - 76, goodsHeight + 74 * this.screenRatio, 60 * this.screenRatio, 60 * this.screenRatio)
            ctx.draw(false, (res) => {
              if (res.errMsg.indexOf('ok') !== -1) {
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  width: 343 * this.screenRatio,
                  height: this.data.goodsHeight,
                  canvasId: 'myCanvas',
                  success: (res) => {
                    this.fileImgPath = res.tempFilePath
                    wx.hideLoading()
                    this.setData({
                      isLoaded: true
                    })
                  }
                })
              }
            })
          }
        })
      }
    })
  },
  saveImage () {
    wx.saveImageToPhotosAlbum({
      filePath: this.fileImgPath,
      success: () => {
        wx.showToast({
          title: '保存成功'
        })
      },
      fail: (err) => {
        if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: (sure) => {
              wx.openSetting({
                success: (set) => {
                  if (set.authSetting['scope.writePhotosAlbum']) {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限成功,再次点击图片即可保存',
                      showCancel: false
                    })
                  } else {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限失败，将无法保存到相册哦~',
                      showCancel: false
                    })
                  }
                },
                fail: (failData) => {
                }
              })
            }
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload () {

  }
})
